<template>
  <render />
</template>

<script lang="ts" setup>
import { ref, defineProps } from "vue";
import { h, resolveComponent } from "vue";
const props = withDefaults(defineProps<{
    name?: string; // 图标名称 `ele-` 开头为elementplus图标
    color?: string, // 图标颜色
    size?: number | string, // 图标大小
}>(), {
    name: '',
    size: 18,
});

const render = () => {
    if (props.name?.startsWith('ele-')) {
        //<el-icon color='xxx' size='xxx'><ele-xxx></el-icon>
        return h(
            resolveComponent('el-icon'), 
            {color: props.color, size: props.size}, 
            () => h(resolveComponent(props.name))
        );
    } else {
        return h('i'); // <i></i>
    }
};

</script>
<style lang="scss" scoped></style>
